<template>
	<div class="orders">
		<div class="orders_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">全部订单<i class="el-icon-close"></i></div>
		</div>
		<div class="orders_bottom">
			<div class="orders_bottom_new">
				<div class="orders_bottom_new_goods">
					<div class="orders_bottom_new_goods_btn">
					</div>
					<div class="orders_bottom_new_goods_screening">
						<div class="orders_bottom_new_goods_screening_left">
							<div class="orders_bottom_new_goods_screening_left_select">
								<i>订单状态</i>
								<el-select v-model="selectValue"  placeholder="请选择" @change="_selectFn">
								    <el-option
									v-for="(item,index) in options"
									:key="index"
									:label="item"
									:value="index">{{item}}
									</el-option>
								</el-select>
								
							</div>
							<div class="orders_bottom_new_goods_screening_left_select">
								<i>下单时间</i>
								<el-date-picker
								      v-model="value1"
								      type="daterange"
								      range-separator="至"
								      start-placeholder="开始日期"
								      end-placeholder="结束日期"
									  @change="_getTime">
								</el-date-picker>
							</div>
						</div>
						<div class="orders_bottom_new_goods_screening_right">
							<el-input v-model="seachInfo" placeholder="请输入订单信息查询"></el-input>
							<button @click="_toSeach"><i class="el-icon-search"></i>搜索</button>
						</div>
					</div>
				</div>
			</div>
			<div class="orders_bottom_table_box">
				<div class="orders_bottom_table">
					<table>
						<tr>
							<th>订单号</th>
							<th>下单时间</th>
							<th>商品</th>
							<th>数量</th>
							<th>价格</th>
							<th>买家</th>
							<th>配送</th>
							<th>状态</th>
							<th>操作</th>
						</tr>
						<tr v-for="(v,i) in tableList" :key="i">
							<td>{{v.order_code}}</td>
							<td>{{v.create_time | dateformat('YYYY-MM-DD HH:mm:ss')}}</td>
							<!-- <td>{{}}</td> -->
							<td>kk</td>
							<td>{{v.all_num}}</td>
							<td>{{v.all_price}}</td>
							<td>{{v.username}}</td>
							<td>{{v.move_way=='1'?'快递':v.move_way=='2'?'自提':''}}</td>
							<td>{{v.order_status=='1'?'待付款':v.order_status=='2'?'待发货':v.order_status=='3'?'待收货':v.order_status=='4'?'已完成':'已关闭'}}</td>
							<td>
								<button class="editor" @click='_toShopInfo' :data-id="v.id" :data-status="v.order_status">详情</button>
								<button class="shelves" v-if="v.order_status!='4' && v.order_status!='5'" @click="_changStatus">{{v.order_status=='1'?'确认付款':v.order_status=='2'?'发货':v.order_status=='3'?'确认发货':''}}</button>
								<button class="delete" v-show="v.order_status!='4' && v.order_status!='5'">{{v.order_status=='1'?'关闭订单':v.order_status=='2'?'关闭并退款':v.order_status=='3'?'物流修改':''}}</button>
							</td>
						</tr>
						<tr v-if="tableList.length == 0"><td class="table_title" colspan="8">当前数据空空如也</td></tr>
					</table>
				</div>
			</div>
		</div>
		<div class="orders_bottom_page">
			<div class="orders_bottom_page_left">
			</div>
			<div class="orders_bottom_page_right">
				 <el-pagination
				      @size-change="handleSizeChange"
				      @current-change="handleCurrentChange"
				      :current-page="page"
				      :page-sizes="[100, 200, 300, 400]"
				      :page-size="pagesize"
				      layout="total, sizes, prev, pager, next, jumper"
				      :total="total"
					  background>
				    </el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
		     return {
				seachInfo: '',
				ok:'',
				checkAll:false,
				selectValue:'',
				checkBoxAll:[],				// 选中的数据
				tableList:[],
				options:['待付款','待发货','待收货','已完成','已关闭'],
				value1: [], //时间
				page:1,
				pagesize:100,
				total:0
			}
		},
		mounted(){
			this._getOrdersList()
			
		},
		methods: {
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pagesize=val;
				this._getOrdersList();
				this._selectFn(this.selectValue)
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.page=val
				this._getOrdersList()
			},
			// 获取全部订单
			_getOrdersList(){
					this.$axios.post("/api/admin/shop/productOrder/lst",{store_id:'1',order_status:'all',page:this.page,pagesize:this.pagesize}).then(res=>{
            		console.log(res);
						if(res.code==1){							
							this.tableList=res.data.data?res.data.data:[];
							this.total = res.data.count;  //总条数
						}
					})
			},

			_selectFn(e){ //获取当前选择的订单状态列表
			let order_status = e+1;
			this.selectValue=e;
				this.$axios.post("/api/admin/shop/productOrder/lst",{store_id:'1',order_status,page:this.page,pagesize:this.pagesize}).then(res=>{
					if(res.data.code==1){
						this.tableList=res.data.data.data?res.data.data.data:[];
						this.total = res.data.data.data.length;  //总条数
					}
					console.log(res);
				})
			},

			_getTime(e){//选择时间并转换为时间戳 并获取数据列表
				console.log(e);
				let time = e.map(item=>{
					return item.getTime()
				})
				console.log(time);
				this.value1=time;
				let order_status = this.selectValue!==''?this.selectValue+1:'all';
				this.$axios.post("/api/root/PackOrder/lst",{order_status,start_date:this.value1[0],end_date:this.value1[1],page:this.page,pagesize:this.pagesize}).then(res=>{
					if(res.data.code==1){
						this.tableList=res.data.data.data?res.data.data.data:[];
						this.total = res.data.data.data.length;  //总条数
					}
					console.log(res);
				})
			},
			
			//点击搜索按钮
			_toSeach(){
				let order_status = this.selectValue!==''?this.selectValue+1:'all';
				console.log(order_status);
				console.log(this.value1[0]);
				this.$http.post('/api/root/PackOrder/lst',{order_status,start_date:this.value1[0],end_date:this.value1[1],keyword:this.seachInfo}).then(res=>{
					console.log(res);
				})
			},

			//点击详情跳转
			_toShopInfo(e){
				console.log(e);
				let order_id = e.target.dataset.id;
				let order_status = e.target.dataset.status
				if(order_status=='1'){ //判断此条数据订单状态跳转到对应详情页
					this.$router.push({path:`/paymentDetails?order_id=${order_id}`})
				}else if(order_status=='2'){
					this.$router.push({path:`/sendDetails?order_id=${order_id}`})
				}else if(order_status=='3'){
					this.$router.push({path:`/forDetails?order_id=${order_id}`})
				}else if(order_status=='4'){
					this.$router.push({path:`/completedDetails?order_id=${order_id}`})
				}else if(order_status=='5'){
					this.$router.push({path:`/closedDetails?order_id=${order_id}`})
				}
			},

			_changStatus(e){

			}
		},
	}
</script>


<style lang="less" scoped="scoped">
	@import 'orders.less';
</style>
